import {Navigate,useRoutes} from "react-router-dom"
import Login from '../pages/Login'
import Main from '../pages/Main'
import NotFound from '../components/NotFound'
import Home from '../pages/Main/Home'
import About from '../pages/Main/About'
import List from '../components/List'

// 因为规范的写法是把路由组件放在pages文件夹中，components文件夹中放公共路由，比如notfound，还有很多地方需要用到的只是数据不同的子组件
const routes =[
    {
        path:'/login',
        element:<Login/>
    },
    {
        path:'/main',
        element:<Main/>,
        children:[
            {
                path:'/main/home',
                element:<Home/>,
                children:[
                    {
                        path:'/main/home/music/:id',
                        element:<List/>  
                    },
                    {
                        path:'/main/home/news/:id',
                        element:<List/>  
                    }
                ]
            },
            {
                path:'/main/about',
                element:<About/>
            }
        ]
    },{
        path:'/',
        element:<Navigate to='/login' />
    },{
        path:'*',
        element:<NotFound/>
    },
]
export default routes

// hooks可以在函数式组件的最外层使用，当变量名为大写，就会识别为函数式组件，这样在APP中就直接使用这个MyRoutes组件就会生成路由结构了（因为识别到函数式组件时，会自动调用这个函数）
export const MyRoutes=()=>{

   return useRoutes(routes)
}
//在自定义hooks中可以使用hooks（前面有use就会被识别为自定义hooks）
export const useMyRoute =()=>{
    return useRoutes(routes)
}